<template>
  <el-form ref="form" :model="form" :rules="rules" v-bind="handleConfig.formConfig">
    <el-form-item
      v-for="item in handleConfig.formItems"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :style="{ display: item.wrap ? 'block' : handleConfig.formConfig.inline ? 'inline-block' : 'block' }"
    >
      <!-- 插槽 -->
      <template v-if="item.slot">
        <slot :name="item.prop" />
      </template>

      <template v-else>
        <!-- input,input-number, cascader(有options),textarea-->
        <component
          :is="MapOne[item.type]"
          v-if="MapOne[item.type]"
          v-model="form[item.prop]"
          :type="item.type || 'text'"
          :options="item.options"
          v-bind="item.config"
        >
          <template slot="prepend">
            <slot :name="`${item.prop}-prepend`" />
            <template v-if="item.prepend">{{ item.prepend }}</template>
            <!-- 这里有点不好弄，不好把优先级提到slot，现在只能插槽和配置项不能同时有 -->
          </template>
          <template slot="append">
            <slot :name="`${item.prop}-append`" />
            <template v-if="item.append">{{ item.append }}</template>
          </template>
        </component>
        <!-- radio,checkbox,select -->
        <component
          :is="MapTwo[item.type][0]"
          v-if="MapTwo[item.type]"
          v-model="form[item.prop]"
          v-bind="item.config"
        >
          <component
            :is="MapTwo[item.type][1]"
            v-for="cellItem in item.optons"
            :key="cellItem.value"
            :label="cellItem.label"
            :value="cellItem.value"
            v-bind="cellItem.config"
          >{{ cellItem.label }}</component>
        </component>
      </template>
    </el-form-item>
    <el-form-item label=" ">
      <el-button v-bind="handleConfig.confirmButton" @click="handleSave">{{
        handleConfig.confirmButton.text || '保存'
      }}</el-button>
      <el-button v-bind="handleConfig.cancelButton" @click="onReset">{{
        handleConfig.cancelButton.text || '取消'
      }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { handleTypeof } from '@/utils/index'
import { MapOne, MapTwo } from './map'
export default {
  props: {
    config: {
      type: [Object, Array],
      default() {
        return []
      }
    },
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    rules: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      MapOne,
      MapTwo,
      defaultConfig: {
        inline: false,
        'label-suffix': '', // 所有标签label的后缀
        'status-icon': false, // 红色叉号
        size: 'mini',
        'label-width': '80px',
        disabled: false
      },
      confirmButton: {
        text: '保存',
        type: 'primary'
      },
      cancelButton: {
        text: '取消'
      }
    }
  },
  computed: {
    handleConfig() {
      if (handleTypeof(this.config) === 'Object') {
        // Object
        return {
          confirmButton: Object.assign(this.confirmButton, this.config.confirmButton || {}),
          cancelButton: Object.assign(this.cancelButton, this.config.cancelButton || {}),
          formConfig: Object.assign(this.defaultConfig, this.config.formConfig || {}),
          formItems: this.config.formItems.map(item => {
            return { type: 'input', wrap: false, ...item }
          })
        }
      } else {
        // Array
        return {
          confirmButton: this.confirmButton,
          cancelButton: this.cancelButton,
          formConfig: this.defaultConfig,
          formItems: this.config.map(item => {
            if (item.type) return item
            return { type: 'input', wrap: false, ...item }
          })
        }
      }
    }
  },
  methods: {
    onReset() {
      this.$emit('cancel')
      if (this.handleConfig.formConfig.isSearch) {
        Object.keys(this.form).forEach(key => {
          this.form[key] = ''
        })
      }
    },
    handleSave() {
      this.$emit('search')
      this.$emit('submit', { validate: this.$refs.form.validate })
    }
  }
}
</script>

<style></style>
